<template>
	<div class="index_section_wrapper" v-loading="loading">
		<div class="header">{{ isPostsExam ? '上岗' : '在岗' }}培训</div>
		<div class="wrapper">
			<el-row :gutter="20" type="flex" v-if="courseListData.length > 0">
				<el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(item, index) in courseListData" :key="index">
					<course-item :data="item" @click.native="handleLookCourse(item.id)"></course-item>
				</el-col>
			</el-row>
		</div>
		<router-link class="button" to="/trainingResources/training-list">更多培训</router-link>
	</div>
</template>

<script>
import courseItem from './courseItem';
import { queryCoursePageList } from '@/api/home/sysCourse';
export default {
	components: { courseItem },
	data() {
		return {
			loading: false,
			courseType: '0',
			courseTypes: [],
			courseListData: []
		};
	},
	computed: {
		//是否上岗
		isPostsExam() {
			return true;
		}
	},
	watch: {
		courseType: {
			handler(val) {
				this.getCourseListData(val);
			},
			immediate: true
		}
	},
	async mounted() {
		this.loading = true;
		this.getCourseListData();
	},
	methods: {
		//获取课程列表
		async getCourseListData(type) {
			let obj = { page: 1, limit: 4, auditStatus: 2, courseType: 6 };
			let params = { ...obj, status: 1, labelValue: type === '0' ? type : '' };
			let result = await queryCoursePageList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.courseListData = result.data || [];
			}
		},

		//查看课程
		handleLookCourse(id) {
			this.$router.push(`/trainingResources/training-detail?courseId=${id}`);
		}
	}
};
</script>

<style lang="scss" scoped>
.index_section_wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 32px 0;
	width: 100%;
	height: calc(100vh - 175px);
	background: url('~@/assets/home/index_bg.jpg') no-repeat center;
	background-size: cover;
	.header {
		font-size: 36px;
		line-height: 1;
		font-weight: bold;
		color: var(--primary);
	}
	.wrapper {
		width: 1366px;
	}
	.el-row {
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		padding-top: 32px;
	}
	.el-col {
		margin-bottom: 20px;
	}
	a.button {
		display: flex;
		align-items: center;
		font-size: 16px;
		line-height: 1;
		padding: 9px 15px;
		background-color: rgba(147, 11, 11, 0.2);
		color: #fff;
		border-radius: 4px;
		text-decoration: none;
		border: solid 1px var(--colorH1);
		&:hover {
			background-color: var(--colorH1);
		}
	}
}
</style>
